Rotulo

EL MUNDO DE KIKO

Ultimas entradas

Entrada Destacada

PÁGINA DE BIENVENIDA

CAJA DE SEGUIDORES DE FACRBOOK EN UN POPOUT PARA BLOGGER. Es indispensable para muchos blogs de blogger tener una página...

CAJA DE SEGUIDORES DE FACRBOOK EN UN POPOUT PARA BLOGGER.





Es indispensable para muchos blogs de blogger tener una página de blogs que contengan las redes sociales más visitadas en la actualidad, es por esto que voy a compartir con ustedes un Popout de Facebook para que lo utilicen en su blog de blogger.

 El nuevo Popout de caja de seguidores de Facebook lo podrán utilizar en la parte izquierda, derecha, arriba del blog y abajo del blog, solo necesitan seguir mis instrucciones de configuración y listo, podrán utilizar este espectacular Popout caja de seguidores de Facebook, y así obtener más Likes en su blog de blogger.

Sólo podran utilizar un widget, asi que deberas elegir cual de ellos te biene mejor en tu blog.

Funcionamiento

Esta nueva caja de seguidores de Facebook es estática y solo se abrirá cuando el cursor del Mouse pase por encima de ella.

Siga los siguientes pasos

Si no utilizas ningún plugin de Jquery en tu blog de Blogger, deberás insertar el plugin y si ya utilizas el plugin de Jquery en tu blog de Blogger ya no necesitaras insertar este código.

Si no utilizas el plugin de Jquery, da un clic en “Plantilla”, luego en “Editar HTML” y busca este código <head>

y abajo de el inserta la siguiente línea de código

 Un clic en “Plantilla”



 Un clic en “Editar HTML”



Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación



En  este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor,
debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor,



 Coloca este código en el buscador y dale un "Enter"


<head>




Inserta las siguientes líneas de código justo  debajo del código que encontraste.



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>


Ahora da un clic en “Guardar plantilla”, recuerda si ya tienes instalado este plugin sáltate este paso y dirígete al segundo paso.



Segundo Paso


 Para implementarlo en vuestro Bloc en un gadget solo tenéis que seguir estos pasos:

Un clic en “Diseño”



Clic en “Añadir un gadget”



Busca el widget que dice “HTML-Javascript” y ábrelo



Coloca el siguiente código en el interior







Insertar el Popout de Facebook a la derecha


<style type="text/css">
/*<![CDATA[*/
#fbplikebox{display: block;padding: 0;z-index: 99999;position: fixed;}
.fbplbadge {background-color:#3B5998;display: block;height: 150px;top: 50%;margin-top: -75px;position: absolute;left: -47px;width: 47px;background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLOGsJYnS-FJY8QUGa3TrxMQs2Y2WfQdi7ABdqxbJf-wr3EahgvpGy-_VjhXPgFOGnKIMGyi94nLln86yMBZJxxkVUpH7UGWmJzs6Adejh0fbEA7HyvRPYzwBfcGgz-ma9N4H3Vx7S29Ah/s1600/w2b_vertical-right.png");background-repeat: no-repeat;overflow: hidden;-webkit-border-top-left-radius: 8px;-webkit-border-bottom-left-radius: 8px;-moz-border-radius-topleft: 8px;-moz-border-radius-bottomleft: 8px;border-top-left-radius: 8px;border-bottom-left-radius: 8px;}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
    (function(w2b){
        w2b(document).ready(function(){
            var $dur = "medium"; // Duration of Animation
            w2b("#fbplikebox").css({right: -250, "top" : 100 })
            w2b("#fbplikebox").hover(function () {
                w2b(this).stop().animate({
                    right: 0
                }, $dur);
            }, function () {
                w2b(this).stop().animate({
                    right: -250
                }, $dur);
            });
            w2b("#fbplikebox").show();
        });
    })(jQuery);
/*]]>*/
</script>
<div id="fbplikebox" style="display:none;">
    <div class="fbplbadge"></div>
    <iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/Ayudadeblogger&amp;width=250&amp;height=250&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23C4C4C4&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:250px;background:#FFFFFF;" allowtransparency="true"></iframe>
</div>


Realiza estos cambios

El link que esta marcado de color azul, deberás sustituirlo por el link de tu fanpage de Facebook, si quieres cambiar el color del widget solo cambia las letras que están marcadas de color rojo por el código de color que tu quieras.

Ahora da un clic en “Guardar” y ubica el widget donde tú quieras y listo ya tienes tu nuevo Popout de caja de seguidores de Facebook.




Da un clic en “Añadir un gadget” haz la misma operación que con el anterior e inserta las siguientes líneas de código:


Insertar el Popout de Facebook a la Izquierda




<style type="text/css">
/*<![CDATA[*/
#fbplikebox{display: block;padding: 0;z-index: 99999;position: fixed;}
.fbplbadge {background-color:#3B5998;display: block;height: 150px;top: 50%;margin-top: -75px;position: absolute;right: -47px;width: 47px;background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihngLhoThvOl7T5dQjy2ILcdVQ57XWYzFlKn7HJtEMUVneJC7LpsQ92WUzE16LUHucs0u3AOlu4b5S_ggROUafXUrvibVmDQBS6LdLLtV3mgYSsYzBzn6bXATICuERsxm5_O88v3HNPgVF/s1600/w2b_vertical-left.png");background-repeat: no-repeat;overflow: hidden;-webkit-border-top-right-radius: 8px;-webkit-border-bottom-right-radius: 8px;-moz-border-radius-topright: 8px;-moz-border-radius-bottomright: 8px;border-top-right-radius: 8px;border-bottom-right-radius: 8px;}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
    (function(w2b){
        w2b(document).ready(function(){
            var $dur = "medium"; // Duration of Animation
            w2b("#fbplikebox").css({left: -250, "top" : 100 })
            w2b("#fbplikebox").hover(function () {
                w2b(this).stop().animate({
                    left: 0
                }, $dur);
            }, function () {
                w2b(this).stop().animate({
                    left: -250
                }, $dur);
            });
            w2b("#fbplikebox").show();
        });
    })(jQuery);
/*]]>*/
</script>
<div id="fbplikebox" style="display:none;">
    <div class="fbplbadge"></div>
    <iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/Ayudadeblogger&amp;width=250&amp;height=250&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23C4C4C4&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:250px;background:#ffffff;" allowtransparency="true"></iframe>
</div>


Realiza estos cambios

El link que esta marcado de color azul, deberás sustituirlo por el link de tu fanpage de Facebook, si quieres cambiar el color del widget solo cambia las letras que están marcadas de color rojo por el código de color que tu quieras.

Ahora da un clic en “Guardar” y ubica el widget donde tú quieras y listo ya tienes tu nuevo Popout de caja de seguidores de Facebook.




Da un clic en “Añadir un gadget” haz la misma operación que con el anterior e inserta las siguientes líneas de código:

Insertar el Popout de Facebook Arriba de tu blog


<style type="text/css">
/*<![CDATA[*/
#fbplikebox{display: block;padding: 0;z-index: 99999;position: fixed;}
.fbplbadge {background-color:#3B5998;display: block;height: 47px;left: 50%;margin-left: -75px;position: absolute;bottom: -47px;width: 150px;background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUPlYd4ibBG8LbGZkLV0y56YMeYs98qBf-rAqeaayVKhb2ajPJtfyeu5wVnKXAaTSuj5TPd2hrXvdcAUmDIvlMIt-aY2EeRh45KXiW7iLTTmjg0-ZsBdlOFxP-_3dLcoMHQ3N0mfO6_eeq/s1600/w2b_horizantal.png");background-repeat: no-repeat;overflow: hidden;-webkit-border-bottom-right-radius: 8px;-webkit-border-bottom-left-radius: 8px;-moz-border-radius-bottomright: 8px;-moz-border-radius-bottomleft: 8px;border-bottom-right-radius: 8px;border-bottom-left-radius: 8px;}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
    (function(w2b){
        w2b(document).ready(function(){
            var $dur = "medium"; // Duration of Animation
            w2b("#fbplikebox").css({top: -250, "left" : 100 })
            w2b("#fbplikebox").hover(function () {
                w2b(this).stop().animate({
                    top: 0
                }, $dur);
            }, function () {
                w2b(this).stop().animate({
                    top: -250
                }, $dur);
            });
            w2b("#fbplikebox").show();
        });
    })(jQuery);
/*]]>*/
</script>
<div id="fbplikebox" style="display:none;">
    <div class="fbplbadge"></div>
    <iframe src="http://www.facebook.com/plugins/likebox.php?href= http://www.facebook.com/Ayudadeblogger&amp;width=250&amp;height=250&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23C4C4C4&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:250px;background:#ffffff;" allowtransparency="true"></iframe>
</div>

Realiza estos cambios

El link que esta marcado de color azul, deberás sustituirlo por el link de tu fanpage de Facebook, si quieres cambiar el color del widget solo cambia las letras que están marcadas de color rojo por el código de color que tu quieras.

Ahora da un clic en “Guardar” y ubica el widget donde tú quieras y listo ya tienes tu nuevo Popout de caja de seguidores de Facebook.




Da un clic en “Añadir un gadget” haz la misma operación que con el anterior e inserta las siguientes líneas de código:

Insertar el Popout de Facebook abajo de tu blog



<style type="text/css">
/*<![CDATA[*/
#fbplikebox{display: block;padding: 0;z-index: 99999;position: fixed;}
.fbplbadge {background-color:#3B5998;display: block;height: 47px;left: 50%;margin-left: -75px;position: absolute;top: -47px;width: 150px;background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUPlYd4ibBG8LbGZkLV0y56YMeYs98qBf-rAqeaayVKhb2ajPJtfyeu5wVnKXAaTSuj5TPd2hrXvdcAUmDIvlMIt-aY2EeRh45KXiW7iLTTmjg0-ZsBdlOFxP-_3dLcoMHQ3N0mfO6_eeq/s1600/w2b_horizantal.png");background-repeat: no-repeat;-webkit-border-top-left-radius: 8px;-webkit-border-top-right-radius: 8px;-moz-border-radius-topleft: 8px;-moz-border-radius-topright: 8px;border-top-left-radius: 8px;border-top-right-radius: 8px;overflow: hidden;}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
    (function(w2b){
        w2b(document).ready(function(){
            var $dur = "medium"; // Duration of Animation
            w2b("#fbplikebox").css({bottom: -250, "left" : 100 })
            w2b("#fbplikebox").hover(function () {
                w2b(this).stop().animate({
                    bottom: 0
                }, $dur);
            }, function () {
                w2b(this).stop().animate({
                    bottom: -250
                }, $dur);
            });
            w2b("#fbplikebox").show();
        });
    })(jQuery);
/*]]>*/
</script>
<div id="fbplikebox" style="display:none;">
    <div class="fbplbadge"></div>
    <iframe src="http://www.facebook.com/plugins/likebox.php?href= http://www.facebook.com/Ayudadeblogger&amp;width=250&amp;height=250&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23C4C4C4&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:250px;background:#ffffff;" allowtransparency="true"></iframe>
</div>


Realiza estos cambios

El link que esta marcado de color azul, deberás sustituirlo por el link de tu fanpage de Facebook, si quieres cambiar el color del widget solo cambia las letras que están marcadas de color rojo por el código de color que tu quieras.

Ahora da un clic en “Guardar” y ubica el widget donde tú quieras y listo ya tienes tu nuevo Popout de caja de seguidores de Facebook.







 Data de la Publicación; 07-09-2019

 Fuente;  ayudadeblogger

 Publicado por;                                                                            

WIDGETS PARA BLOGGER CON SLIDING LATERAL Y CAJA DE SEGUIDORES DE GOOGLE+ . Obtener una buena caja de seguidores de Go...

WIDGETS PARA BLOGGER CON SLIDING LATERAL Y CAJA DE SEGUIDORES DE GOOGLE+ .






Obtener una buena caja de seguidores de Google + en tu blog de blogger, es lo que El mundo de Kiko.com te ayudara a implementarlo,

es un simple código javascript, el cual está diseñado para que se muestre a la derecha de tu página, en la cual al momento que pases el cursor

 por el icono de Google + se desplegara la caja de seguidores, y es mas probable que los usuarios que visitan tu blog de blogger te sigan. Aumentaran las visitas de tu blog,

 y a parte de eso Google indexara mas rápido de lo que te imaginas tu blog de blogger, gracias a los seguidores de tu blog. Su instalación es muy fácil 

solo tendrás que copiar el código en un widget y ubicarlo donde tu quieras y se mostrara, funciona en todos los navegadores como Firefox, Google Chrome, Internet Explorer, etc.


Vamos a trabajar e instalarlo

Un clic en “Diseño”



Clic en “Añadir un gadget”



Busca el widget que dice “HTML-Javascript” y ábrelo



Coloca el siguiente código en el interior







<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
//<!--
$(document).ready(function() {$(".gplusbox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-330"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.gplusbox{
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheURBDtDdr3VLtMmTRGWDSeYOwF4lAj1-WyihQwo2gW0Vj4GAyEg_4NZu5rIAD9famY1LqiChSaalp1rq2ZVsiU3bCn0I5qR4SgkQv-juSq9r-eQ2EZCxB7qIHf_LPpUegxrKJWnGMCPw/s400/g%252B+softglad.png") no-repeat scroll left center transparent !important;
display: block;
float: right;
height: 275px;
padding: 0 0px 0 46px;
width: 325px;
z-index: 99999;
position:fixed;
right:-330px;
top:20%;
}
.gplusbox div{
padding: 8px;
background: white;
border: 2px solid #D64937;
border-radius: 15px;
border-right: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
</style>
<div class="gplusbox"><div>
<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/114283163993086871162" data-source="blogger:blog:followers" data-width="320">
</div>
<script type="text/javascript">

      (function() {
        window.___gcfg = {'lang': 'en'};
        var po = document.createElement('script');
        po.type = 'text/javascript';
        po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(po, s);
      })();
    </script>
</div></div>

Realiza el siguiente cambio:

Borra el link que esta marcado de color azul https://plus.google.com/114283163993086871162 y pon ahí el link de tu perfil de Google +

Eso es todo ahora dale un clic en “Guardar” y ubícalo donde tu quieras

Felicidades ahora ya tienes una hermosa caja sliding de Google + en tu blog de blogger


 Data de la Publicación; 07-09-2019

 Fuente;  ayudadeblogger

 Publicado por;                                                                            

ESTILO DIFERENTE PARA LAS ENTRADAS POPULARES DE BLOGGER . Obtener nuevos estilos fascinantes para implementarlos en nue...

ESTILO DIFERENTE PARA LAS ENTRADAS POPULARES DE BLOGGER .





Obtener nuevos estilos fascinantes para implementarlos en nuestro blog de blogger es lo que van a aprender con este grandioso tutorial de blogger.

 Voy a explicar un truco muy simple y fácil de realizar para cambiar el estilo de nuestras entradas populares para blogger, este truco para blogger se lo realiza de forma sencilla, solo tendrán que seguir las instrucciones claras de como insertar los diferentes estilos y así podrán obtener este magnifico truco para blogger.

 El mundo de Kiko.com se basa en presentarles trucos nuevos para blogger y que se muestren en todos los navegadores posibles como Firefox, Google Chrome, Internet Explorer etc. 

La funcionalidad de este nuevo estilo de entradas populares para blogger es, aumento de la imagen al momento de pasar el cursor por una de ellas, estilo único en la forma en que se muestra la imagen y el resumen de nuestra entra popular de blogger.


Ahora dirígete a diseño y mira si tienes habilitado el widget de Entradas populares, si no lo tienes habilitado, tendrás que habilitarlo y ubícalo donde mejor te parezca.









2 Da un clic en “Plantilla”



3 Un clic en “Editar HTML”



Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación




En este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor, debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual te mostrara tal y cual deberá aparecerte el buscador en tu editor HTML de tu plantilla y así puedas colocar el código en el buscador al momento que yo diga busca este código.



4 Busca este código

]]></b:skin>

Inserta las siguientes líneas de código arriba del código que encontraste



/*-----PopularPosts start by Ayudadeblogger.com-----*/
.PopularPosts .widget-content ul li {
padding: 0;
list-style:none;
background: #eee;
margin: 10px 0px;
border:0;
-webkit-transition: .5s;
-moz-transition: .5s;
-o-transition: .5s;
}
.PopularPosts .item-title {
padding: 0 5px;
}
.PopularPosts .item-snippet {
padding: 0 5px 5px;
}
.PopularPosts .widget-content ul li {
overflow: hidden;
}
.PopularPosts .widget-content ul li:hover {
background: #000;
}
.PopularPosts .widget-content ul li:hover .item-snippet {
color: #fff;
}
.PopularPosts .widget-content ul li:hover .item-title a {
color: #fff;
}
.PopularPosts .item-thumbnail {
height: 100px;
overflow: hidden;
margin-right:0;
}
.PopularPosts img {
width:100%;
margin-top: -40px;
-webkit-transition: .5s;
-moz-transition: .5s;
-o-transition: .5s;
}
.PopularPosts ul li:hover .item-thumbnail img {
margin-top: -150px;
}


 Busca este código

</head>

 Un clic en “Plantilla”



 Un clic en “Editar HTML”



Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación



En  este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor,
debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor,



 Coloca este código en el buscador y dale un "Enter"


</head>



Inserta las siguientes líneas de código justo arriba (ó antes) del código que encontraste





<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>


 Busca este código

</body>

Un clic en “Plantilla”




 Un clic en “Editar HTML”




Ahora se le abrirá el Editor HTML de su plantilla




En este punto deberás presionar la tecla “Control” de su teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de su editor, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual le muestra como debe aparecerle el buscador en el editor HTML de su plantilla y así pueda colocar el código en el buscador al momento que yo diga busca este código.



 Busca este código


</body>

Ingresa el siguiente código justo arriba del código que encontraste.




<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>

<script type='text/javascript'>
$(&#39;.popular-posts img&#39;).attr(&#39;src&#39;, function(e, t) {
return t.replace(&#39;/w72-h72-p-nu/&#39;, &#39;/s350-c/&#39;)
});
$(&#39;.popular-posts ul li .item-snippet&#39;).each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(&#39; &#39;);
if(j&gt;10)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;));
});
$(&#39;.popular-posts ul li .item-content a&#39;).each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(&#39; &#39;);
if(j&gt;=6)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;));
});
</script>


 Ahora necesita aumentar un valor, cambiar 72 por 300, para ello siga las instrucciones del siguiente

  video tutorial



8 Eso es todo, ahora dale un clic en “Guardar plantilla”






 Data de la Publicación; 07-09-2019

 Fuente;  ayudadeblogger

 Publicado por;                                                                             
Suscribirse a: Entradas (Atom)

Paginacion